<template>
	<view class="payment">
		<view class="content-head">
			<view class="cash">
				<view class="coin">{{ money ? money : 0}}<text>元</text></view>
				<view class="money">当前余额</view>
			</view>
		</view>
		<view class="block-left">
			<view class="block" v-for="(item, i) in fee" :key="i" @click="event(i)">
				<div :class=" state == i + 1? 'active-tag' : 'div' " @click="select(i)">充值{{ item.money / 100 }}元</div>
			</view>
		</view>
		<button @click="payMent" :disabled="type ? true : false">确认支付</button>
	</view>
</template>

<script>
	import {
		post
	} from "../../api/index.js"
	import paths from "../../config/path.js"
	export default {
		data() {
			return {
				fee: [],
				cash: "",
				state: "",
				userData: "",
				money: "",
				type: false,
				need_pay: ""
			}
		},
		onLoad(option) {
			if(option.need_pay == "1") {
				this.need_pay = option.need_pay
			}
		},
		created() {
			let userData = uni.getStorageSync("userInfo")
			this.userData = userData
			let url = paths.money_list
			post(url, {
				userid_locked: userData.userid_locked
			}).then(res => {
				this.fee = res.data.list
				this.money = res.data.money
			})
		},
		methods: {
			event(i) {
				if (this.fee[i].money) {
					this.cash = this.fee[i].money
				}
			},
			select(i) {
				this.state = i + 1
			},
			payMent() {
				let that = this
				if (that.cash) {
					that.type = true
					uni.login({
						success(res) {
							let url = paths.pay
							post(url, {
								code: res.code,
								fee: that.cash / 100,
								member: 1
							}).then(res => {
								// console.log(res)
								let payData = res.data
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: payData.timeStamp,
									nonceStr: payData.nonceStr,
									package: payData.package,
									signType: payData.signType,
									paySign: payData.paySign,
									success: function(res) {
										let url = paths.payInfo
										post(url, {
											userid_locked: that.userData.userid_locked,
											order_id: payData.order_id
										}).then(res => {
											console.log(res)
											if (res.data.code == "2") {
												uni.showToast({
													title: "支付成功",
													success: function() {
														if(that.need_pay == "1") {
															// 如果外部有扫码进来充值完后进入充电页面
															uni.reLaunch({
																url: "../index/index?pay=" + that.need_pay
															})
														} else {
															uni.reLaunch({
																url: "../index/index" 
															})
														}
													}
												})
											} else {
												uni.showToast({
													title: res.data.msg,
													icon: "none"
												})
											}
										})
									},
									fail: function(err) {
										that.type = false
										uni.showToast({
											title: "支付失败!",
											icon: "none"
										})
									}
								})
							})
						}
					})
				} else {
					uni.showToast({
						title: "请选择充值金额",
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.payment {
		display: flex;
		flex-direction: column;
	}

	.content-head {
		position: relative;
		width: 100%;
		height: 360rpx;
		background-image: linear-gradient(#55EDBE, #0DA297);
		text-align: center;
	}

	.cash {
		margin-top: 110rpx;
		color: #FFFFFF;
	}

	.coin {
		font-size: 110rpx;
		font-family: cursive;
	}

	.coin>text {
		font-size: 35rpx;
		font-family: none;
	}

	.money {
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.block-left {
		flex-flow: wrap;
		display: flex;
		box-sizing: border-box;
		margin-top: 15rpx;
	}

	.block {
		width: 50%;
	}

	.div {
		text-align: center;
		padding: 20px;
		margin: 5px;
		border-radius: 8px;
		border: 1px solid #0DA297;
		color: #0DA297;
	}

	.active-tag {
		text-align: center;
		padding: 20px;
		margin: 5px;
		border-radius: 8px;
		background-color: #0DA297;
		color: #FFFFFF;
	}

	button {
		color: #FFFFFF;
		background-color: #0DA297;
		width: 80%;
		letter-spacing: 2px;
		border-radius: 999px;
		position: fixed;
		bottom: 90rpx;
		left: 10%;
	}

	button:active {
		background-color: #cfcfcf;
	}
</style>
